<template>
 <div>
          <!--  面包屑-->
  <el-breadcrumb separator-class="el-icon-arrow-right">
  <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
  <el-breadcrumb-item>首页 </el-breadcrumb-item>
  <el-breadcrumb-item>用户管理</el-breadcrumb-item>
  <el-breadcrumb-item>用户列表</el-breadcrumb-item>
</el-breadcrumb>
  <!-- 卡片视图 -->
  
  <el-card>
    <!-- 添加角色按钮 -->
   <el-row >
     <el-col>
       <el-button type="primary" @click="addRoles">添加角色</el-button>
     </el-col> 
   </el-row>
   <el-row>
    <el-table
      :data="rolelist"
      border 
      stripe 
      style="width: 100%">
      <!-- 展开列 -->
      <el-table-column type="expand">
        <template slot-scope="scope">
        <el-row :class="['dbbottom']" v-for="(item1, index) in scope.row.children" :key="index">
          <!-- 渲染一级权限 -->
          <el-col :span="5">
          <el-tag closable @close="removeRightById(scope.row,item1.id)">{{item1.authName}}</el-tag>
          <i class="el-icon-arrow-right"></i>
          </el-col>
          <el-col :span="19">
            <el-row v-for="(item2)in item1.children" :key="item2.id">
              <el-col :span="6">
                <el-tag type="scuess" closable @close="removeRightById(scope.row,item2.id)">{{item2.authName}}<el-tag>
                   <i class="el-icon-arrow-right"></i>
                <el-col>
                <el-col>
          <el-tag type="success" closable @close="removeRightById(scope.row,item3.id)" v-for="(item3, index) in item2.childern" :key="index" >{{item3.authName}}</el-tag>
                  <el-col>
            </el-row>
          </el-col>
        </el-row>
        </template>
      </el-table-column>
      <el-table-column
        type="index"
        label="#">
      </el-table-column>
      <el-table-column
        prop="roleName"
        label="角色名称" >
      </el-table-column>
      <el-table-column
        prop="roleDesc"
        label="角色描述">
      </el-table-column>
      <el-table-column
        label="操作" width="300px">
        <template slot-scope="scope">
       <el-button type="primary" icon="el-icon-edit" size="mini" @click="editRoles(scope.row.id)">编辑</el-button>
       <el-button type="danger" icon="el-icon-delete" size="mini">删除</el-button>
       <el-button type="warning" icon="el-icon-setting" size="mini"  @click="showSetRightDialog(scope.row)">分配权限</el-button>

        </template>
      </el-table-column>
    </el-table>
   </el-row>
  </el-card>
  <!-- 分配权限的对话框 -->
  <el-dialog
  title="提示"
  :visible.sync="dialogVisible"
  @close="setRightDialogClosed">
  <el-tree
    :data="rightList"
    :props="defaultProps"
    show-checkbox 
    node-key="id"
    default-expand-all
    ref="treeRef"
    default-checked-keys="keyDef">
  </el-tree>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="allotRights">确 定</el-button>
  </span>
</el-dialog>
 </div>
</template>

<script>
export default {
  data() {
    return {
      //角色列表
      rolelist:[],
      dialogVisible:false,
      //权限列表
      rightList:[],
      defaultProps:{
        children:'children',
        label:'authName'
        
      },
      //默认够选的节点
      keyDef:[],
      //当前角色的id
      rouleId:''
    }
  },
  created() {
    this.getRolelist()
  },
  methods: {
    //获取所有角色列表
    async getRolelist(){
       const {data:res}= await this.$http.get('roles')
       if(res.meta.status!==200) return this.$message.error('失败')
       this.rolelist=res.data
    },
    async removeRightById(roule,rightId){
       //弹出是否删除
         const confirmResult= await this.$confirm('是否删除此文件', '提示', {
             confirmButtonText: '确定',
             cancelButtonText: '取消',
             type: 'warning'
         }).catch(err=>err) 
         if (confirmResult!=='confirm'){

             return this.$message('取消删除')
         }
         const{data:res}= await this.$http.delete(`roles/${roule.id}/rights/${rightId}`)
           if(res.status!==200) return this.$message.error('失败')
           roule.children=res.data
    },
    async showSetRightDialog(roule){
      this.dialogVisible=true
      this.rouleId=roule.id
      //选中默认选中的节点
      this.getLeafKeys(roule,this.keyDef)
      const {data:res}= await this.$http.get('roules/:tree')
      if (res.meta.status!==200) {
        return this.$message.error('失败')
      }
      this.rightList=res.data;

    },
    //分配权限确定时给角色赋值权限
    async allotRights(){
      const keys=[  
    ...this.$refs['treeRef'].getCheckedKeys(),
    
    ...this.$refs['treeRef'].getHalfCheckedKey()
      ]
      const idStr=keys.join(',')
      const {data:res}=await this.$http.post(`roles/${this.rouleId}`,{rid:idStr})
      if (res.status!==200) {
        return this.$message.error('错误')
      }
      this.$message.success('成功')
      this.getRolelist()
       this.dialogVisible=false
    },
    //递归增加默认勾选数组的权限
    getLeafKeys(node,arr){
      if (!node.children) {
        return arr.push(node.id)
      }
      node.children.forEach(item =>
        this.getLeafKeys(item.arr)
      );
    },
    //监听关闭对话框事件，来清空当前默认选中的的节点
     setRightDialogClosed(){
       this.keyDef=[]
     }
  },
}
</script>

<style lang="less" scoped>
.el-tag{
  margin:7px;
}
.dbtop{
  border: top 1px solid #eee; 
}

.dbbottom{
  border: 1px solid #eee;
}
.vcenter{
  display:flex;
  align-content:center;
}
</style>